<template>
  <div class="lum-dialog-mask">
    <el-container class="lum-dialog-box" :class="{ 'full-screen': fullscreen }">
      <el-header height="60px" class="header">
        <p>消息管理器</p>
        <p class="title">
          <span>{{ query.talk_type == 1 ? '好友' : '群' }}【{{ title }}】</span>
        </p>
        <p class="tools">
          <i
            class="iconfont"
            style="transform: scale(0.95);margin-top:-1px"
            :class="fullscreen ? 'icon-tuichuquanping' : 'icon-fullscreen'"
            @click="fullscreen = !fullscreen"
          />
          <el-icon @click="close"><ele-Close /></el-icon>
        </p>
      </el-header>

      <el-header height="38px" class="sub-header">
        <el-icon class="pointer" @click="triggerBroadside">
          <template v-if="broadside">
            <ele-Fold />
          </template>
          <template v-else>
            <ele-Expand />
          </template>
        </el-icon>
        <div class="search-box no-select">
          <el-icon><ele-Search /></el-icon>
          <input
            v-model="search.keyword"
            type="text"
            maxlength="30"
            placeholder="搜索"
            @keyup.enter="searchText($event)"
          />
        </div>
      </el-header>

      <el-container class="full-height ov-hidden">
        <el-aside width="200px" class="broadside" v-show="broadside">
          <el-container class="full-height">
            <el-header height="40px" class="aside-header">
              <div
                class="item"
                :class="{ selected: contacts.show == 'friends' }"
                @click="contacts.show = 'friends'"
              >
                我的好友({{ contacts.friends.length }})
              </div>
              <div class="item-shuxian">|</div>
              <div
                class="item"
                :class="{ selected: contacts.show == 'groups' }"
                @click="contacts.show = 'groups'"
              >
                我的群组({{ contacts.groups.length }})
              </div>
            </el-header>
            <el-main class="no-padding">
              <el-scrollbar class="full-height" tag="section" :native="false">
                <div
                  v-for="item in contacts[contacts.show]"
                  class="contacts-item pointer"
                  :class="{
                    selected:
                      query.talk_type == item.type &&
                      query.receiver_id == item.id,
                  }"
                  :key="item.id"
                  @click="triggerMenuItem(item)"
                >
                  <div class="avatar">
                    <el-avatar :size="20" :src="item.avatar" shape="square">
                      <img :src="detaultAvatar" />
                    </el-avatar>
                  </div>
                  <div class="content" v-text="item.name"></div>
                </div>
              </el-scrollbar>
            </el-main>
          </el-container>
        </el-aside>

        <!-- 聊天记录阅览 -->
        <el-main v-show="showBox == 0" class="no-padding">
          <el-container class="full-height">
            <el-header height="40px" class="type-items">
              <span
                v-for="tab in tabType"
                :key="tab.id"
                :class="{ active: query.msg_type == tab.type }"
                @click="triggerLoadType(tab.type)"
                >{{ tab.name }}
              </span>
            </el-header>

            <el-main
              v-if="records.isEmpty"
              class="history-record animated fadeIn"
            >
              <div class="empty-records">
                <img :src="chatSearchNoMessage" />
                <p>暂无聊天记录</p>
              </div>
            </el-main>

            <el-main v-else class="history-record">
              <el-scrollbar class="full-height" tag="section" :native="false">
                <div
                  v-for="record in records.items"
                  :key="record.id"
                  class="message-group"
                >
                  <div class="left-box">
                    <el-avatar
                      shape="square"
                      fit="contain"
                      :size="30"
                      :src="record.avatar"
                    />
                  </div>

                  <div class="right-box">
                    <div class="msg-header">
                      <span class="name">
                        {{
                          record.nickname_remarks
                            ? record.nickname_remarks
                            : record.nickname
                        }}
                      </span>
                      <el-divider direction="vertical" />
                      <span class="time">{{ record.created_at }}</span>
                    </div>

                    <!-- 文本消息 -->
                    <text-message
                      v-if="record.msg_type == 1"
                      :content="record.content"
                    />

                    <!-- 文件 - 图片消息 -->
                    <image-message
                      v-else-if="record.msg_type == 2 && record.file.type == 1"
                      :src="record.file.url"
                    />

                    <!-- 文件 - 音频消息 -->
                    <audio-message
                      v-else-if="record.msg_type == 2 && record.file.type == 2"
                      :src="record.file.url"
                    />

                    <!-- 文件 - 视频消息 -->
                    <video-message 
                      v-else-if="record.msg_type == 2 && record.file.type == 3" 
                      :src="record.file.url"
                    />

                    <!-- 文件 - 其它格式文件 -->
                    <file-message
                      v-else-if="record.msg_type == 2 && record.file.type == 4"
                      :file="record.file"
                      :record_id="record.id"
                    />

                    <!-- 会话记录消息 -->
                    <forward-message
                      v-else-if="record.msg_type == 3"
                      :forward="record.forward"
                      :record_id="record.id"
                    />

                    <!-- 代码块消息 -->
                    <code-message
                      v-else-if="record.msg_type == 4"
                      :code="record.code_block.code"
                      :lang="record.code_block.lang"
                    />

                    <!-- 投票消息 -->
                    <vote-message
                      v-else-if="record.msg_type == 5"
                      :record_id="record.id"
                      :vote="record.vote"
                    />

                    <div v-else class="other-message">未知消息类型</div>
                  </div>
                </div>

                <!-- 数据加载栏 -->
                <div v-show="records.loadStatus == 1" class="load-button blue">
                  <el-icon class="is-loading"><ele-Loading /></el-icon>
                  <span>加载数据中...</span>
                </div>
                <div v-show="records.loadStatus == 0" class="load-button">
                  <el-icon><ele-ArrowDown /></el-icon>
                  <span @click="loadChatRecord">加载更多...</span>
                </div>
              </el-scrollbar>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue'
import { ElNotification } from 'element-plus'
import { formateSize as renderSize, download, imgZoom } from '../utils/functions'
import detaultAvatar from '/@/assets/detault-avatar.jpg'
import chatSearchNoMessage  from '/@/assets/chat-search-no-message.png'
import { useChatApi } from '/@/api/chat/index'
import { useUserInfo } from '/@/stores/userInfo'

export default {
    name: 'TalkSearchRecord',
    props: {
        params: {
            type: Object,
            default: () => {
                return {
                    talk_type: 0,
                    receiver_id: 0,
                    title: '',
                }
            },
        }
    },
    setup(props, context) {
        const { params } = toRefs(props)
        const chatApi = useChatApi()
        const userInfo = useUserInfo()
        const uid = computed(() => {
            return userInfo.websocketInfos.uid
        })
        const state = reactive({
            fullscreen: false,
            user_id: uid.value,
            title: '',
            // 侧边栏相关信息
            broadside: false,
            contacts: {
                show: 'friends',
                friends: [],
                groups: [],
            },
            query: {
                talk_type: 0,
                receiver_id: 0,
                msg_type: 0,
            },
            // 用户聊天记录
            records: {
                record_id: 0,
                items: [],
                isEmpty: false,
                loadStatus: 0,
            },
            showBox: 0,
            tabType: [
                { name: '全部', type: 0 },
                { name: '图片/视频/文件', type: 2 },
                { name: '会话记录', type: 3 },
                { name: '代码块', type: 4 },
                { name: '群投票', type: 5 },
            ],
            search: {
                keyword: '', // 关键字查询
                date: '', // 时间查询
                page: 1, // 当前分页
                totalPage: 50, // 总分页
                items: [], // 数据列表
                isShowDate: false,
            },
        })
        // 获取图片信息
        const getImgStyle = (url) => {
            return imgZoom(url, 200)
        }

        // 获取会话记录消息名称
        const getForwardTitle = (item) => {
            let arr = [...new Set(item.map(v => v.nickname))]
            return arr.join('、') + '的会话记录'
        }
        // 获取好友列表
        const loadFriends = () => {
            chatApi.ServeGetContacts().then(res => {
                const items = res.data.items
                state.contacts.friends = items.map(item => {
                    return {
                        id: item.id,
                        type: 1,
                        avatar: item.avatar,
                        name: item.friend_remark ? item.friend_remark : item.nickname,
                    }
                })
            })
        }
        // 获取群聊列表
        const loadGroups = () => {
            chatApi.ServeGetGroups().then(res => {
                state.contacts.groups = res.data.rows.map(item => {
                    return {
                        id: item.id,
                        type: 2,
                        name: item.group_name,
                        avatar: item.avatar
                    }
                })
            })
        }
        // 左侧联系人菜单点击事件
        const triggerMenuItem = (item) => {
            state.title = item.name
            state.query.talk_type = item.type
            state.query.receiver_id = item.id
            state.showBox = 0
            triggerLoadType(0)
        }
        // 加载历史记录
        const loadChatRecord = () => {
            let data = {
                talk_type: state.query.talk_type,
                receiver_id: state.query.receiver_id,
                record_id: state.records.record_id,
                msg_type: state.query.msg_type,
                limit: 30,
            }
            if (state.records.loadStatus == 1) return
            state.records.loadStatus = 1
            chatApi.ServeFindTalkRecords(data).then(res => {
                if (res.code != 0) return
                let records = data.record_id == 0 ? [] : state.records.items
                records.push(...res.data.rows)
                state.records.items = records
                state.records.loadStatus = res.data.rows.length < res.data.limit ? 2 : 0
                if (state.records.items.length == 0) {
                    state.records.isEmpty = true
                } else {
                    state.records.record_id = state.records.items[state.records.items.length - 1].id
                }
            }).catch(() => {
                state.records.loadStatus = 0
            })
        }
        const triggerLoadType = (type) => {
            state.records.record_id = 0
            state.query.msg_type = type
            state.records.isEmpty = false
            state.records.items = []
            loadChatRecord()
        }
        const searchText = () => {
            if (state.search.keyword == '') {
                state.showBox = 0
                return false
            }
            ElNotification({
                title: '消息',
                message: '查询功能正在开发中...',
                type: 'info'
            })
        }
        const triggerBroadside = () => {
            state.broadside = !state.broadside
        }
        const close = () => {
          context.emit('close')
        }
        onMounted(() => {
            loadFriends()
            loadGroups()
            state.title = params.value.title
            state.query = {
                talk_type: params.value.talk_type,
                receiver_id: params.value.receiver_id,
                msg_type: 0,
            }
            loadChatRecord(0)
        })
        return {
            ...toRefs(state),
            triggerBroadside,
            searchText,
            triggerLoadType,
            loadChatRecord,
            triggerMenuItem,
            loadGroups,
            loadFriends,
            getForwardTitle,
            getImgStyle,
            renderSize,
            download,
            detaultAvatar,
            chatSearchNoMessage,
            close
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
.lum-dialog-mask {
  z-index: 99;
}
.lum-dialog-box {
  width: 100%;
  height: 600px;
  max-width: 800px;
  transition: 1s ease;
  &.full-screen {
    width: 100%;
    height: 100%;
    max-width: unset;
    margin: 0;
    border-radius: 0px;
  }
  .sub-header {
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    border-bottom: 1px solid #f9f4f4;
    padding: 0 10px;
    position: relative;
    display: flex;
    align-items: center;
    i {
      font-size: 22px;
      color: #6f6a6a;
    }
    .search-box {
      position: absolute;
      width: 230px;
      height: 32px;
      top: 2px;
      right: 10px;
      background: #f9f4f4;
      border-radius: 5px;
      i {
        position: absolute;
        left: 10px;
        top: 8px;
        font-size: 16px;
      }
      input {
        position: absolute;
        left: 35px;
        top: 3px;
        height: 25px;
        width: 184px;
        color: #7d7171;
        background: #f9f4f4;
      }
    }
  }
  .broadside {
    border-right: 1px solid #f9f9f9;
    user-select: none;
    transition: 3s ease;
    .aside-header {
      display: flex;
      flex-direction: row;
      // height: 100%;
      border-bottom: 1px solid #f9f9f9;
      padding: 0;
      > div {
        text-align: center;
        line-height: 40px;
        font-size: 13px;
        font-weight: 400;
      }
      .item {
        flex: 1;
        cursor: pointer;
        &.selected {
          color: var(--el-color-primary);
        }
      }
      .item-shuxian {
        flex-basis: 1px;
        flex-shrink: 0;
        color: rgb(232 224 224);
      }
    }
    .contacts-item {
      height: 35px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-left: 10px;
      position: relative;
      .avatar {
        flex-basis: 40px;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .content {
        flex: 1 1;
        height: 100%;
        line-height: 35px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        padding-right: 10px;
      }
      &:hover,
      &.selected {
        background-color: #f5f5f5;
      }
    }
  }
}
/* first box */
.type-items {
  padding: 0 0 0 10px;
  line-height: 40px;
  user-select: none;
  border-bottom: 1px solid #f9f4f4;
  .active {
    color: var(--el-color-primary);
    font-weight: 500;
  }
  span {
    height: 40px;
    min-width: 45px;
    text-align: center;
    cursor: pointer;
    margin: 0 10px;
    font-size: 12px;
    font-weight: 400;
  }
}
.history-record {
  padding: 0 0;
}
.load-button {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  &.blue {
    color: var(--el-color-primary);
  }
  span {
    margin-left: 5px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
  }
}
.empty-records {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #cccccc;
  font-weight: 300;
  font-size: 14px;
  img {
    width: 100px;
  }
}
.message-group {
  min-height: 30px;
  display: flex;
  margin-bottom: 5px;
  flex-direction: row;
  padding: 3px 12px 3px 0;
  &:first-child {
    margin-top: 10px;
  }
  .left-box {
    width: 50px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    user-select: none;
    padding-top: 8px;
    img {
      height: 30px;
      width: 30px;
      border-radius: 3px;
      cursor: pointer;
    }
  }
  .right-box {
    flex: auto;
    overflow-x: auto;
    padding: 0px 5px 0 5px;
    .msg-header {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #a09a9a;
      position: relative;
      user-select: none;
      .name {
        color: #333;
      }
    }
    :deep(.text-message) {
      border-radius: 0;
    }
  }
}
</style>